<template>
  <div class="im-bg">
    <shooting-star />
    <div :class="['im-text', {'im-text--animation': isImtimacyPlayAnimation}]">
      <div :class="['closest']">
        <template v-if="intimacyInfo.bear">
          <div class="im-texttitle">
            <span class="number" style="font-size: 0.4rem">2021</span>年，和你亲密度最高的人
          </div>
          <div class="im-intimacy">
            <div class="im-intimacyprofile_self_container">
              <img :src="intimacyInfo.icon" alt="">
              <div class="im-intimacyselfname">
                {{ intimacyInfo.nick_name }}
              </div>
              <div
                class="im-intimacyprofile_self"
                :style="guaJianStyle(intimacyInfo.sex)"
              ></div>
            </div>
            <div
              :class="[
                'im-intimacy_connect',
                {
                  'im-intimacy_connect--hidden':
                    intimacyInfo.chain_status !== 2,
                },
              ]"
            ></div>
            <div class="im-intimacyprofile_friend_container">
              <img :src="intimacyInfo.bear_icon" alt="">
              <div class="im-intimacyfriendname">
                {{ intimacyInfo.bear_nick_name }}
              </div>
              <div
                class="im-intimacyprofile_friend"
                :style="guaJianStyle(intimacyInfo.bear_sex)"
              ></div>
            </div>
          </div>
        </template>
        <template v-else>
          <div class="im-texttitle">
            <span class="number" style="font-size: 0.4rem">2021</span>年，你是一个独行侠，希望你今年可以收获更多喜欢。
          </div>
        </template>
      </div>
      <template v-if="accompanylist.length > 0">
        <div
          :class="[
            'im-textmid',
            { imtimacyAnimation: isImtimacyPlayAnimation },
          ]"
        >
          <span>在这
            <span class="number" style="font-size: 0.4rem">5</span>
            个年头中，有多少人陪你一起度过...
          </span>
        </div>
        <div
          :class="[
            'friends-wrap'
          ]"
        >
          <div
            v-for="(item, index) in accompanylist"
            :key="index"
            :class="[
              'im-userinform',
              `im-userinform--${index}`
            ]"
          >
            <div class="im-profile1">
              <img :src="item.icon">
            </div>
            <div class="im-nickname">{{ item.nick_name }}</div>
          </div>
        </div>
      </template>
      <template v-else>
        <div
          :class="[
            'im-textmid',
            { imtimacyAnimation: isImtimacyPlayAnimation },
          ]"
        >
          在这
          <span class="number">5</span>
          个年头中，你还没有和任何人有过亲密的小举动呢，快去给你喜欢人表达心意吧
        </div>
      </template>
    </div>
    <div class="im-star1"></div>
    <div class="im-star3"></div>
    <div class="im-star4"></div>
    <div class="im-mirror"></div>
    <div class="im-bottle"></div>
    <!--
      <div class="im-smallstar1"></div>
      <div class="im-smallstar2"></div>
    -->
    <blink-star
      :stars="[
        { left: '2.5rem', top: '0.8rem', type: '--yellow-square' },
        { left: '4.5rem', top: '0.5rem', type: '--cyan' },
        { left: '3.5rem', top: '9.5rem', type: '--yellow-bling' },
        { left: '1.5rem', top: '11.5rem', type: '--yellow-bling' },
      ]"
    />
    <arrows-icon v-if="isImtimacyPlayAnimation" class="arrow-icon" />
  </div>
</template>

<script>
import arrowsIcon from '../components/arrows-icon.vue'
import famaleBg from './images/imtimacy/profile_famale.png'
import maleBg from './images/imtimacy/profile_male.png'

export default {
  components: { arrowsIcon },
  props: {
    accompanylist: {
      type: Array,
      default () {
        return []
      }
    },
    intimacyInfo: {
      type: Object,
      default () {
        return {}
      }
    },
    isImtimacyPlayAnimation: {
      type: Boolean,
      default: false
    }
  },
  computed: {
  },
  methods: {
    guaJianStyle (sex) {
      if(this.intimacyInfo.chain_status !== 2){
        return {}
      }
      switch (sex) {
        case 1:
          return { backgroundImage: `url(${maleBg})` }
          break
        case 0:
          return { backgroundImage: `url(${famaleBg})` }
          break
        case -1:
          //return { backgroundImage: `url(${profileBg})` }
          return {}
          break
      }
    }
    // async getImtimacyList () {
    //   const res = await this.$api.Imtimacy.getImtimacyList()
    //   const { result: { accompanyinfo: accompanylist } } = res
    //   const { result: { userintimacyinfo: intimacyInfo } } = res
    //   this.accompanylist = [
    //     ...accompanylist
    //   ]

    //   this.intimacyInfo = {
    //     ...intimacyInfo
    //   }
    // }
  }
}
</script>

<style lang="scss" scoped>
body .arrow-icon{
  animation-delay: 8s;
}
.im-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("./images/D_bg.jpg");
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: 0 100%;
  overflow: hidden;
}

.im-text {
  position: relative;
  top: 4rem;
  padding: 0 0.5rem 0 0.5rem;
  display: flex;
  flex-direction: column;
  .closest {
    animation-delay: 0;
    animation-fill-mode: forwards;
    width: 100%;
    .im-texttitle {
      width: 100%;
      font-size: 0.32rem;
      background-size: 100% auto;
      background-repeat: no-repeat;
      color: #fff;
    }
    .im-intimacy {
      width: 3.46rem;
      text-align: center;
      margin: 0 auto;
      margin-top: 0.5rem;
      display: flex;
      align-items: center;
      .im-intimacyprofile_self_container {
        position: relative;
        opacity: 0;
        .im-intimacyprofile_self {
          position: relative;
          width: 1.14rem;
          height: 1.14rem;
          background-size: 100% auto;
          background-repeat: no-repeat;
          z-index: 2;
        }
        .im-intimacyselfname {
          position: absolute;
          top: 1.1rem;
          text-align: center;
          width: 100%;
          font-size: 10px;
          color: #fff;
          opacity: 0.8;
          @include ellipsis();
        }
        img {
          position: absolute;
          bottom: 0.13rem;
          right: 0.12rem;
          z-index: 1;
          margin: 0 auto;
          width: 0.9rem;
          height: 0.9rem;
          border-radius: 50%;
        }
      }
      .im-intimacy_connect {
        width: 1.41rem;
        height: 0.7rem;
        margin: 0 -0.1rem 0 -0.15rem;
        background-image: url("./images/imtimacy/connect.png");
        background-size: 100% auto;
        background-repeat: no-repeat;
      }
      .im-intimacy_connect--hidden {
        visibility: hidden;
      }
      .im-intimacyprofile_friend_container {
        position: relative;
        opacity: 0;
        .im-intimacyprofile_friend {
          position: relative;
          width: 1.14rem;
          height: 1.14rem;
          background-size: 100% auto;
          background-repeat: no-repeat;
          z-index: 2;
        }
        .im-intimacyfriendname {
          position: absolute;
          text-align: center;
          width: 100%;
          top: 1.1rem;
          font-size: 10px;
          color: #fff;
          opacity: 0.8;
          @include ellipsis();
        }
        img {
          position: absolute;
          top: 0.12rem;
          left: 0.12rem;
          margin: 0 auto;
          width: 0.9rem;
          height: 0.9rem;
          border-radius: 50%;
          z-index: 1;
        }
      }
    }
  }

  .im-textmid {
    width: 100%;
    font-size: 0.32rem;
    color: #fff;
    text-align: left;
    margin-top: 0.55rem;
    animation-delay: 1s;
    animation-fill-mode: forwards;
    transform: translateX(-7rem);
    span {
      line-height: 0.45rem;
    }
  }
  .friends-wrap {
    display: flex;
    // align-items: center;
    // justify-content: flex-start;
    margin-top: 0.5rem;
    animation-delay: 1s;
    animation-fill-mode: forwards;
  }
  .im-userinform {
    width: 20%;
    height: 1.2rem;
    position: relative;
    animation-delay: 2s;
    animation-fill-mode: forwards;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    .im-profile1 {
      position: absolute;
      top: 0;
      width: 0.85rem;
      height: 0.85rem;
      background-size: 100% auto;
      background-repeat: no-repeat;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 95%;
        height: 95%;
        border-radius: 100%;
      }
    }
  }
  .im-userinform:nth-child(even) {
    margin-top: 1rem;
    .im-nickname {
      margin-top: 0.9rem;
      font-size: 10px;
      color: #fff;
      opacity: 0.8;
      width: 100%;
      text-align: center;
      @include ellipsis();
    }
  }
  .im-userinform:nth-child(odd) {
    .im-nickname {
      font-size: 10px;
      color: #fff;
      opacity: 0.8;
      margin-top: 0.9rem;
      width: 100%;
      text-align: center;
      @include ellipsis();
    }
  }
}

.im-text--animation{
 .im-texttitle{
    animation-name: fadeInLeft;
    animation-duration: 1s;
 }
 .im-textmid{
    animation-name: fadeInLeft;
    animation-duration: 1s;
    animation-delay: 2.8s;
 }

 .im-intimacyprofile_self_container{
    animation: opacityIn 1s ease-in forwards;
    animation-delay: 1s;
 }
 .im-intimacyprofile_friend_container{
    animation: opacityIn 1s ease-in forwards;
    animation-delay: 1.8s;
  }
 .im-userinform--0{
    animation: opacityIn 1s ease-in forwards;
    animation-delay: 3.8s;
  }

  .im-userinform--1{
    animation: opacityIn 1s ease-in forwards;
    animation-delay: 4.6s
  }

  .im-userinform--2{
    animation: opacityIn 1s ease-in forwards;
    animation-delay: 5.4s
  }

  .im-userinform--3{
    animation: opacityIn 1s ease-in forwards;
    animation-delay: 6.2s
  }

  .im-userinform--4{
    animation: opacityIn 1s ease-in forwards;
    animation-delay: 7s
  }

}

@keyframes opacityIn {
  0%{
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-2.2rem);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.im-star1 {
  position: absolute;
  top: 10.3%;
  right: 19.5%;
  width: 0.86rem;
  height: 0.43rem;
  background-image: url("./images/D_star1.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  animation: star1 6s infinite;
  @keyframes star1 {
    50% {
      top: 13.3%;
    }
    100% {
      top: 10.3%;
    }
  }
}
.im-star3 {
  position: absolute;
  top: 46.2%;
  right: 1%;
  width: 0.8rem;
  height: 0.51rem;
  background-image: url("./images/D_star3.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  animation: star3 6s infinite;
  @keyframes star3 {
    50% {
      top: 41.2%;
    }
    100% {
      top: 46.2%;
    }
  }
}
.im-star4 {
  position: absolute;
  top: 72.8%;
  left: 0;
  width: 1.34rem;
  height: 1.57rem;
  background-image: url("./images/D_star4.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  animation: star4 6s infinite;
  @keyframes star4 {
    50% {
      top: 75.8%;
    }
    100% {
      top: 72.8%;
    }
  }
}
.im-mirror {
  position: absolute;
  top: 10.7%;
  left: 30.3%;
  width: 1.86rem;
  height: 1.57rem;
  background-image: url("./images/D_mirror.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  animation: mirror 4s infinite;
  @keyframes mirror {
    50% {
      top: 7.7%;
    }
    100% {
      top: 10.7%;
    }
  }
}
.im-bottle {
  position: absolute;
  top: 81.4%;
  right: 0;
  width: 3.56rem;
  height: 2.18rem;
  background-image: url("./images/D_bottle.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  animation: bottle 4s infinite;
  @keyframes bottle {
    50% {
      top: 84.4%;
    }
    100% {
      top: 81.4%;
    }
  }
}
.im-smallstar1 {
  position: absolute;
  top: 19.5%;
  left: 0;
  width: 100%;
  height: 6.75rem;
  margin-left: 0.01rem;
  margin-right: 0.02rem;
  background-image: url("./images/D_smallstar1.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  animation: smallstart 3s infinite;
  @keyframes smallstart {
    0%,
    100% {
      transform: scale(0.95);
      opacity: 0;
    }
    50% {
      transform: scale(1);
      opacity: 1;
    }
  }
}
.im-smallstar2 {
  position: absolute;
  top: 74%;
  right: 46%;
  width: 0.32rem;
  height: 0.37rem;
  background-image: url("./images/D_smallstar2.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  animation: smallstart2 3s infinite;
  @keyframes smallstart2 {
    0%,
    100% {
      transform: scale(0.6);
      opacity: 0;
    }
    50% {
      transform: scale(1);
      opacity: 1;
    }
  }
}
</style>
